<template>
  <div style="width:100%;height:100%;background:none">
    <div class="title">
      电话抽查
      <span style="font-size:1.2rem">（局劳务数据中心）</span>
    </div>
    <div class="contentTitle">
      抽查累计总人数
      <span
        style="font-size:3rem;color:#5CFFFF;margin-left:2rem;font-family: 'Agency-FB';font-weight: bold;"
      >125679</span>
      <span style="font-size:1.6rem;color:#5CFFFF;font-family: 'Agency-FB';font-weight: bold;">人</span>
    </div>

    <div style="width:90%;height:60%;margin:0 auto">
      <Echart :echartObj="echartObj" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import Echart from '@/components/echarts/index.vue'
export default {
  components: {
    Echart
  },
  data() {
    return {
      echartObj: {},
      dataXAxis: ['PGK-NT1','PGK-NT2','PGK-NT3','PGK-NT4','PGK-NT5','PGK-NT6'],
      dataYAxis: [10,20,40,15,55,25]
    }
  },
  mounted() {
    this.echartObj = {
      grid: {
        left: 0,
        top: '6%',
        bottom: '1%',
        right: 0,
        containLabel: true
      },
      xAxis: {
        data: this.dataXAxis,
        axisLabel: {
          //   inside: true,
          textStyle: {
            color: '#fff',
            fontSize:'10'

          }
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        max: 60,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          }
        }
      },

      series: [
        {
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            color: '#fff'
          },
          barWidth: '20%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5A8EFA' },
              { offset: 0.7, color: '#60C8FD' },
              { offset: 1, color: '#66FAFF' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
            
          },
          data: this.dataYAxis
        }
      ]
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 0.5%;
}
.contentTitle {
  font-size: 1.4rem;
  color: #fff;
  margin: 0 auto;
  width: 80%;
  text-align: center;
  margin-bottom: 2%;
}
</style>